<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		:destroy-on-close="false"
		top="4vh"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			:submit-disabled="submitDisabledCom"
			max-height="80vh"
			@success="onFormSuccess"
		>
			<template v-slot:addressInfo="{ form, keyName }">
				<text>{{ orderInfo.express_info.formatted_address }}</text>
				<text style="margin-left: 6px;">{{ orderInfo.express_info.receiver_mobile }}</text>
				<text style="margin-left: 6px;">{{ orderInfo.express_info.receiver_name }}</text>
				<text style="margin-left: 6px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="copyAddress(orderInfo.express_info)">复制</text>
			</template>
			<template v-slot:express_no="{ form, keyName, column }">
				<el-input v-model="form[keyName]" placeholder="请输入快递单号" ref="express_no"></el-input>
				<vk-data-tips :tips="column.tips"></vk-data-tips>
			</template>
			<template v-slot:goods_sku_list="{ form, keyName }">
				<view>
					<el-button size="mini" style="margin: 0px 0px 10px 10px;" type="primary" @click="allinSend" :disabled="allSendDisabled">
						设置全发
					</el-button>
					 <el-table
							v-loading="loading"
							:data="form[keyName]"
							:header-cell-style="{ textAlign: 'center' }"
							:cell-style="{ textAlign: 'center' }"
							class="customer-table"
							style="border:none;"
						>
							<el-table-column prop="goods_name" label="产品名称" :show-overflow-tooltip='true' min-width="240"> </el-table-column>
							<el-table-column prop="max_send_num" label="可发数量" min-width="240"> </el-table-column>
							<el-table-column prop="send_num" label="已发数量" min-width="150">
							<template slot-scope="scope">
								<vk-data-input-number :max="scope.row.max_send_num" v-model="scope.row.send_num" style="width: 100px;margin: 0 10px;" :clearable="false"></vk-data-input-number>
							</template>
						</el-table-column>
					 </el-table>
				</view>
			</template>
		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {}
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading:false,
			page: {
				title: "发货",
				submitText: "发 货",
				cancelText: "关 闭",
				showCancel: true,
				top: "7vh",
				width: "800px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					_id:'',
					express_com:'',							 // 快递公司字母简称
					express_name:'',						// 快递公司,如果要做成对应的select多选框数据应当保持一致
					express_no:'',							// 快递单号,用于数据展示
					send_name:'',							// 对应的发货人姓名
					position:'',							// 发货人地址信息
					tips:["发送短信提醒"],	// 用户消息提醒设置信息
					send_mobile:'',						// 发货人手机号
					goods_sku_list:[]					// 对应的商品的数据
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/business/sys/order.orderSend",
					// 表单字段显示规则
					columns: [
						{ key:"order_no", title:"订单号", type:"text-view" },
						{ key:"addressInfo", title:"收货信息", type:"text" },
						{
							key:"express_name", title:"快递公司", type:"remote-select", placeholder:"请选择快递公司",
							action:"admin/business/sys/expressCo.kh_getList",
							props:{ list:"rows", value:"name", label:"name" },
							showAll:true,
							watch: (res) => {
								// 记住最后一次选择的快递公司
								vk.setVuex("$user.expressName",res.option.name);
							}
						},
						{ key:"express_no", title:"快递单号", type:"text",tips:"可以安装扫码枪，扫码快递单，自动填写单号。" } ,
						{ key:"send_name", title:"发货人姓名", type:"text" },
						{ key:"send_mobile", title:"发货人手机", type:"text" },
						{ key:"tips", title:"操作", type:"checkbox",
							data:[
								{ value:"发送短信提醒", label:"发送短信提醒" },
								{ value:"更新发货时间", label:"更新发货时间" }
							],
						},
						{
						  key:"goods_sku_list", title:"发货详情", type:"array<object>", showLabel:false, minItemWidth:200,
						  showAdd:false,
						  // 每行每个字段对应的渲染规则
						  columns:[
						    { key:"goods_name", title:"产品名称", type:"text-view", minWidth:200 },
						    { key:"buy_num", title:"购买数量", type:"text-view", minWidth:150 },
								{
									key:"send_num", title:"已发数量", type:"number", clearable:false, minWidth:150,
									rules:[
									  { required:true, message:"该项不能为空", trigger:["blur"] },
									]
								}
						  ]
						}
					],
					// 表单验证规则
					rules: {
						// 快递公司等对应的检测
						express_name: [
							{ required: true, message: '快递名称为必选项', trigger: 'blur' },
						],
						express_no: [
							{ required: true, message: '订单号为必填项', trigger: 'blur' },
						],
					},
					// 左侧label的宽度
					labelWidth: "100px",
				}
			},
			orderInfo:{
				express_info:{}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item={} } = that.value;
			// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
			let debug = process.env.NODE_ENV !== "production";
			let userInfo = vk.getVuex("$user.userInfo");
			that.orderInfo = item;
			if (that.orderInfo.delivery_mode === 2) {
				that.form1.props.rules.express_no = [];
			} else {
				that.form1.props.rules.express_no = [
					{ required: true, message: '订单号为必填项', trigger: 'blur' },
				];
			}
			vk.pubfn.objectAssign(that.form1.data, vk.pubfn.copyObject({
				_id: item._id,
				order_no: item.order_no,
				express_com: item.express_info.express_com,
				express_name: item.express_info.express_name || vk.getVuex("$user.expressName"),
				express_no: item.express_info.express_no || "",
				send_name: item.express_info.send_name || userInfo.nickname,
				position: item.express_info.position.address,
				tips: debug ? ["发送订阅消息"] : ["发送短信提醒","发送订阅消息"],
				send_mobile: item.express_info.send_mobile,
			}));
			setTimeout(function(){
				if(that.$refs.express_no && !that.form1.data.express_no){
					that.$refs.express_no.focus();
				}
			},300);
			that.form1.data.goods_sku_list = item.goods_sku_list.map((item, index) => {
				return {
					buy_num: item.buy_num,
					max_send_num: item.buy_num - item.refund_num,
					send_num: item.send_num,
					goods_name: item.goods_name,
					_id: item._id,
					goods_id: item.goods_id,
					image: item.image,
					sku_name: item.sku_name
				}
			});
			if([1,2].indexOf(item.status) > -1){
				that.allinSend();
			}
		},
		// 设置全发
		allinSend(){
			// 之前的数据已经保证对应的send_num有值了,现在要进行对应的计算
			that.form1.data.goods_sku_list.map((item,index)=>{
				if(item.max_send_num != item.send_num){
					item.send_num = item.max_send_num;
				}
			})
		},
		// 监听 - 页面关闭
		onClose() {
			//that.$refs.form1.resetForm(); // 关闭时，重置表单
		},
		// 监听 - 提交成功后
		onFormSuccess(res) {
			that.value.show = false; // 关闭页面
			if ([3,4].indexOf(res.data.orderInfo.status) == -1) {
				vk.alert(res.data.msg,"发货失败","我知道了");
			}
			vk.pubfn.objectAssignForVue(that.value.item, res.data.orderInfo, that);
			that.$emit("success");
		},
		// 复制地址
		copyAddress(address){
			let text = `${address.formatted_address} ${address.receiver_mobile} ${address.receiver_name}`;
			uni.setClipboardData({
				data: text,
				success: () => {
					vk.toast('地址复制成功');
				}
			});
		}
	},
	watch: {

	},
	// 计算属性
	computed: {
		allSendDisabled(){
			let that = this;
			let count = 0;
			let list = that.form1.data.goods_sku_list || [];
			list.map((item,index)=>{
				if(item.max_send_num === item.send_num){
					count++
				}
			});
			if(count === list.length){
				return true;
			}
			else{
				return false;
			}
		},
		//如果对应的数据全等于0的情况下,对提交按钮进行一个动态的禁用
		submitDisabledCom(){
			let that = this;
			let count = 0;
			let list = that.form1.data.goods_sku_list || [];
			let isEmpty = false;
			list.map((item,index)=>{
				if(typeof item.send_num === "number"){
					count += item.send_num;
				}else{
					isEmpty = true;
				}
			});
			if(count === 0 || isEmpty){
				return true
			}else{
				return false
			}
		},
	}
};
</script>

<style lang="scss" scoped>

</style>
